import React,{useState, useRef, memo} from 'react'
// memo 会比对属性，如果一样，就不重新执行
const Input = ({ setList, handleList }) => {
    const [text, setText] = useState('');
    const inputRef = useRef();
    console.log('input render')
    const handleChange = e => setText(e.target.value);
    const handleAdd = () => {
        setList(
            list=>[
                ...list,
                {
                    title: text, 
                    time: new Date().toLocaleString()
                }
            ]
        )
    }
    const handleAdd2 = () => handleList(text);
    return (
        <div>
            <input 
                ref={inputRef}
                value={text} 
                onChange={handleChange} 
                type="text" 
            />
            <button onClick={handleAdd}>添加</button>
            <button onClick={handleAdd2}>添加2</button>
        </div>
    )
}

export default memo(Input)